<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../common.css" />
	<style type="text/css">
		body {
			background: #222;
		}

		.loading14 {
			width: 120px;
			height: 60px;
			border-radius: 200px 200px 0 0;
			background: radial-gradient(farthest-side at bottom, pink 0 95%, #0000 0) bottom/0% 0% no-repeat #ddd;
			-webkit-mask: repeating-radial-gradient(farthest-side at bottom, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);
			mask: repeating-radial-gradient(farthest-side at bottom, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);
			animation: l5 2s infinite steps(6);
		}

		@keyframes l5 {
			100% {
				background-size: 120% 120%;
			}
		}


		.loading16 {
			width: 120px;
			height: 120px;
			border-radius: 50%;
			background: linear-gradient(pink 0 0) bottom/100% 0% no-repeat #ddd;
			-webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;
			mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;
			animation: l6 2s infinite steps(7);
		}

		@keyframes l6 {
			100% {
				background-size: 100% 115%;
			}
		}

		.loading17 {
			width: 120px;
			height: 24px;

			-webkit-mask: radial-gradient(circle closest-side at bottom, #000 94%, #000) 0 0/25% 100%,
				linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
			background: linear-gradient(pink 0 0) 0/0% no-repeat #ddd;
			animation: l8 2s infinite linear;
		}

		@keyframes l8 {
			100% {
				background-size: 100%;
			}
		}

		.loading18 {
			width: 120px;
			height: 24px;
			border-radius: 20px;
			border: 1px solid pink;
			position: relative;
		}

		.loading18::after {
			content: '';
			position: absolute;
			margin: 2px;
			inset: 0 100% 0 0;
			border-radius: inherit;
			background-color: pink;
			animation: l9 2s infinite;
		}

		@keyframes l9 {
			100% {
				inset: 0;
			}
		}

		.loading19 {
			padding: 40px;
			box-sizing: border-box;
		}

		.loading19 .dot {
			color: white;
			font-size: 40px;
			overflow: hidden;
			color: pink;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			transform: translateZ(0);
			/* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
			animation: load 1.7s infinite ease, round 1.7s infinite ease;
		}

		@keyframes load {
			0% {
				box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
			}

			5%,
			95% {
				box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
			}

			10%,
			59% {
				box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
			}

			20% {
				box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
			}

			38% {
				box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
			}

			100% {
				box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
			}
		}

		@keyframes round {
			0% {
				transform: rotate(0deg);
				/* 开始旋转 div 元素 */
			}

			100% {
				transform: rotate(360deg);
				/* 结束旋转 div 元素 */
			}
		}
	</style>
	<body>
		<div class="loading14"></div>
		<div class="loading16"></div>
		<div class="loading17"></div>
		<div class="loading18"></div>
		<div class="loading19">
			<div class="dot"></div>
		</div>
	</body>
</html>
